<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<title>紫皮书</title>
		
		<!--                       CSS                       -->
	  
		<!-- Reset Stylesheet -->
		<link rel="stylesheet" href="./css/reset.css" type="text/css" media="screen" />
	  
		<!-- Main Stylesheet -->
		<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="./css/index.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="./css/nivo-slider.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="./css/slider.css" type="text/css" media="screen" />
		<link href="./css/scroller_roll.css" rel="stylesheet" type="text/css" />

		
		<!--                       Javascripts                       -->
  
		<!-- jQuery -->
		<script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
		<script type="text/javascript" src="./js/zps-index.js"></script>
		<script type="text/javascript" src="./js/jquery.nivo.slider.pack.js"></script>
		<script src="./js/jquery.tabify.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="./js/scroller_roll.js"></script>
		<script type="text/javascript">
			// <![CDATA[
				
			$(document).ready(function () {
				$('#menu').tabify();
				$('#menu2').tabify();
				$("#scroller_roll1").scroller_roll({
                    title_show: 'enable',//enable  disable
                    time_interval: '60',
                    window_padding: '5',
                    border_size: '0',
                    images_width: '102',
                    images_height: '160',
                    images_margin: '5',
                    title_size: '16',
                    title_color: 'black',
                    show_count: '4'
                });
				$('#slider').nivoSlider();
			});
					
			// ]]>
		</script>
		<!-- 特殊 选中样式 -->
		<script type="text/javascript">
			
			$(document).ready(function(){
				
				/*选中，如下*/
				$('#li-index').addClass('on');
				
			});
		</script>
		
		<!-- 特殊结束 -->
		<script type="text/javascript" src="./js/swfobject.js"></script>
	</head>
  
	<body><div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->
		
		<div id="header">
			<div id="header-left" class="align-left">
				<div id="logo">
					<h1>紫皮书</h1>
				</div>
			</div>
			<div id="header-right" class="align-right">
				<div id="header-right-up">
					<div id="slogan" class="align-left"><p>精彩你生活</p></div>
					<div id="search-box" class="align-right">
						<span>
							<input type="text" class="input_text_focus" name="pname">
						</span>
						<input type="submit" value="搜索" class="btn_search">
					</div>
				</div>
				<div id="main-menu">
					<ul class="nav">
						<li id="li-index"><a href="index.jsp">首页</a></li>
						<li id="li-info"><a href="city_info.jsp">城市情报</a></li>
						<li id="li-map"><a href="emotion_map.jsp">情绪地图</a></li>
						<li id="li-shortcut"><a href="leisure_shortcut.jsp">休闲快捷</a></li>
						<li id="li-vogue"><a href="#">时尚中人</a></li>
						<li id="li-other"><a href="#">其他栏目</a></li>
					</ul>
					<!-- 需要就写，不需要则可以不写 -->
					<ul class="sub_nav">
						<li class="on"><a href="#">测试</a></li>
						<li><a href="#">测试</a></li>
						<li><a href="#">测试</a></li>
						<li><a href="#">测试</a></li>
						<li><a href="#">测试</a></li>
					</ul>
					<!-- End subnav -->
				</div>
			</div>
			<div class="clear"></div>
		</div>	
		
		<div id="main-body">